<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*  一、重复设置  */
        #p0 {
            color: red;
        }

        #p0 {

            color: blue;
        }

        /*
         最后p0是蓝色，不显示红色。
         记住一点：所有代码都是从上往下执行（特殊情况我会说明）。

        */


        /* 二、权重问题   */

        /*id p1的背景是：red*/
        #p1 {

            background: red;
        }

        /*class p2的背景是：lightblue*/
        .p2 {
            background: lightblue;
        }

        /*所有p的背景是：orange*/
        p {
            background: orange;
        }


        /*  按代码的逻辑来分析
            最后：
            p0颜色：orange
            p1颜色：orange
            p2颜色：orange

            实际：
            p0颜色：orange
            p1颜色：red
            p2颜色：lightblue

            这就是权重造成的。
            权重关系如下：
            id (100) > class (10) > 标签 (1)

            问：如果出现父子选择器怎么算权重？
            答：算各个之和。
            例： .yyy .xxx p{}
                 权重：10 +10 +1 = 21

                 #zzz{}
                 权重：100

                 分析结果：
                 #zzz{} 会覆盖 .yyy .xxx p{}
          */

        /*具体示例如下：*/
        #zzz{background: aqua}
        .yyy .xxx p{ background: blueviolet}
    </style>
</head>
<body>
<p id="p0">KingSwim0</p>
<p id="p1">KingSwim1</p>
<p class="p2">KingSwim2</p>


<div class="yyy">
    <div class="xxx">
        <p id="zzz">
            权重
        </p>
    </div>
</div>

</body>
</html>